<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>条件指令-v-if/v-else-if/v-else</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        table tr td {
            padding: 5px;
            border: 1px solid #ccc;
        }

        .red {
            color: red
        }

        .green {
            color: green
        }

        .blue {
            color: blue
        }
        [v-cloak]{display: none}
    </style>
</head>
<body>

<div id="app" v-cloak>
    <table>
        <thead>
        <tr>
            <td>id</td>
            <td>名字</td>
            <td>性别</td>
            <td>激活状态</td>
            <td>操作</td>
        </tr>
        <thead>
        <tbody>
        <tr v-for="(user,index) in users" :key="user.id">
            <td>{{user.id}}</td>
            <td><span v-text="user.username"></span></td>
            <td>
                <span class="red" v-if="user.gender==1">男</span>
                <span class="green" v-if="user.gender==0">女</span>
                <span class="blue" v-if="user.gender==2">保密</span>
            </td>
            <td>
                <span class="red" v-if="user.active==1">激活</span>
                <span class="green" v-if="user.active==0">未激活</span>
            </td>
            <td><a href="javascript:void(0);" @click="delitem">删除</a> <a :href="'/edit/'+user.id">编辑</a></td>
        </tr>
        </tbody>
    </table>
</div>

<script src="js/vue.global.js"></script>
<script>
    var vm = Vue.createApp({
        created(){
        },
        data() {
            return {
                users: [
                    {id: 1, username: "张三1", gender: 1, active: 1},
                    {id: 2, username: "张三2", gender: 0, active: 0},
                    {id: 3, username: "张三3", gender: 1, active: 1},
                    {id: 4, username: "张三4", gender: 2, active: 1}

                ]
            }
        },
        methods:{
            delitem(){
                alert(1)
            }
        }

    }).mount("#app");
</script>

</body>
</html>